<template>
  <div class="container">
    <common-header :title="title"></common-header>
    <div class="content">
      <div :class="{'tel': true, 'ipt': true, 'warning-style': !tel.isRight, 'focus-style': tel.isFocus}">
        <b></b>
        <input type="number" @focus="telFocus()" @blur="telBlur()" placeholder="请输入手机号" v-model.trim="tel.val">
        <div class="warning" v-show="!tel.isRight">
          <i></i>
          <div class="warning_message">
            {{tel.warningMessage}}
          </div>
        </div>
      </div>
      <div :class="{'code': true, 'ipt': true, 'warning-style': !code.isRight, 'focus-style': code.isFocus}">
        <b></b>
        <input type="number" @focus="codeFocus()" @blur="codeBlur()" placeholder="请输入验证码"
               v-model.trim.number="code.val">
        <div :class="{'send_code': true, 'unusable': !canSendCode}" @click="sendCode">{{sendCodeMessage}}</div>
        <div class="warning" v-show="!code.isRight">
          <i></i>
          <div class="warning_message">
            验证码错误
          </div>
        </div>
      </div>
      <div :class="{'psw1': true, 'ipt': true, 'warning-style': !psw1.isRight, 'focus-style': psw1.isFocus}">
        <b></b>
        <input type="password" @focus="psw1Focus()" @blur="psw1Blur()" placeholder="请输入密码（8~16位字符区分大小写）"
               v-model.trim="psw1.val">
        <div class="warning" v-show="!psw1.isRight">
          <i></i>
          <div class="warning_message">
            {{psw1.warningMessage}}
          </div>
        </div>
      </div>
      <div :class="{'psw2': true, 'ipt': true, 'warning-style': !psw2.isRight, 'focus-style': psw2.isFocus}">
        <b></b>
        <input type="password" @focus="psw2Focus()" @blur="psw2Blur()" placeholder="请再次输入密码" v-model.trim="psw2.val">
        <div class="warning" v-show="!psw2.isRight">
          <i></i>
          <div class="warning_message">
            两次密码输入不一致
          </div>
        </div>
      </div>
      <div class="makesure" @click="reset()">
        确定
      </div>
    </div>
    <clientSide></clientSide>

    <!-- 修改密码成功提示-->
    <succeed-tip :tips="resetSucceedTip" :isSucceeful="resetSucceed"></succeed-tip>
  </div>
</template>
<script>
  // 引入下载客户端子组件
  import clientSide from '../subComponents/clientSide.vue'

  //  import $ from 'jquery'
  import Header from '../subComponents/header.vue'

  import successfulTip from '../subComponents/successfulTip.vue'

  import { sendCode, checkoutPassword } from '../../common'

  export default {
    data () {
      return {
        title: '找回密码',
        canSendCode: true, // 是否允许发送验证码
        sendCodeMessage: '发送验证码', // 发送验证码按钮的文本信息
        tel: {
          val: '',
          isFocus: false,                                             // 是否聚焦
          isRight: true,                                              // 是否正确
          isExsit: true,                                              // 该用户是否存在
          warningMessage: '请输入正确的手机号'                         // 手机号验证失败的提示信息
        },
        code: {
          val: '',
          isFocus: false,                                             // 是否聚焦
          isRight: true                                               // 是否正确
        },
        psw1: {
          val: '',
          warningMessage: '密码不能为空',
          isFocus: false,                                             // 是否聚焦
          isRight: true                                               // 是否正确
        },
        psw2: {
          val: '',
          isFocus: false,                                             // 是否聚焦
          isRight: true                                               // 是否正确
        },
        regExp: '', // 验证的正则
        telWarningMessage: '请输入正确的手机号', // 手机号验证失败的提示信息
        resetSucceed: false, // 重置是否成功
        resetSucceedTip: '修改成功'
      }
    },
    components: {
      clientSide,
      'common-header': Header,
      'succeed-tip': successfulTip
    },
    methods: {
      telFocus () {
        this.tel.isRight = true
        this.tel.isFocus = true
      },

      telBlur () {
        this.tel.isFocus = false

        // 验证手机号
        this.regExp = /^1(3|4|5|8)\d{9}$/
        var flag = this.regExp.test(this.tel.val)
        if (flag && this.tel.isExsit) {
          this.tel.isRight = true
          return
        }

        this.tel.isRight = false

        if (!flag) {
          this.tel.warningMessage = '请输入正确的手机号'
          return
        }

        if (!this.tel.isExsit) {
          this.tel.warningMessage = '该帐号不存在'
        }
      },

      codeFocus () {
        this.code.isRight = true
        this.code.isFocus = true
      },

      codeBlur () { this.code.isFocus = false },

      psw1Focus () {
        this.psw1.isRight = true
        this.psw1.isFocus = true
      },

      psw1Blur () {
        checkoutPassword(this)
      },

      psw2Focus () {
        this.psw2.isRight = true
        this.psw2.isFocus = true
      },

      psw2Blur () {
        this.psw2.isFocus = false
        this.psw2.isRight = (this.psw1.val === this.psw2.val)
      },

      sendCode () {
        if (!this.tel.val || !this.tel.isRight || !this.tel.isExsit) {
          this.tel.isRight = false
          return false
        }

        sendCode(this)
      },

      reset () {
        if (!this.tel.isRight || this.tel.isUsed || !this.code.isRight || !this.psw1.isRight || !this.psw2.isRight) return

        if (!this.tel.val) {
          this.tel.isRight = false
          return false
        }

        // 验证码验证
        this.regExp = 162458 // 后台获取
        this.code.isRight = (this.code.val === this.regExp)

        if (!this.psw1.val) {
          this.psw1.isRight = false
          this.psw1.warningMessage = '密码不能为空'
          return false
        }

        if (!this.psw2.val) {
          this.psw2.isRight = false
          return false
        }

        // 如果执行到这里 说明验证成功
        this.resetSucceed = true
        setTimeout(() => {
          this.$router.push({
            path: '/login/user',
            query: {user: this.tel.val}
          })
        }, 2000)
      }
    }
  }
</script>
<style scoped>
  .container {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
  }

  .content {
    margin-top: 0.3rem;
  }

  .content input {
    border: none;
    background-color: #f7f7f7;
    width: 100%;
    color: #333;
    font-size: 0.36rem;
    text-indent: 0.5rem;
  }

  .content .focus-style {
    border-color: #5E88FF !important;
  }

  .content .warning-style {
    border-color: #fd7671 !important;
  }

  .content .ipt .warning {
    width: 100%;
    height: 0.37rem;
    position: absolute;
    left: 0;
    bottom: -0.4rem;
  }

  .content .ipt .warning i {
    position: absolute;
    top: 0.06rem;
    left: 0.06rem;
    width: 0.25rem;
    height: 0.25rem;
    vertical-align: middle;
    background: url('../../assets/images/login/warning.png') no-repeat;
    background-size: 100% 100%;
  }

  .content .ipt .warning .warning_message {
    padding-left: 0.37rem;
    width: 100%;
    color: #fd7671;
    font-size: 0.24rem;
    height: 100%;
    line-height: 0.37rem;
  }

  .content .ipt {
    width: 6.88rem;
    height: 1.14rem;
    position: relative;
    margin: 0 auto;
    border-bottom: 1px solid #cdcdcd;
    padding-top: 0.5rem;
  }

  .content .tel b {
    width: 0.3rem;
    height: 0.38rem;
    background: url('../../assets/images/sprite.png') no-repeat -2.02rem -0.75rem;
    background-size: 10rem 6rem;
    position: absolute;
    top: 0.58rem;
    left: 0.1rem;
  }

  .content .code b {
    width: 0.36rem;
    height: 0.28rem;
    background: url('../../assets/images/sprite.png') no-repeat -1.35rem -0.76rem;
    background-size: 10rem 6rem;
    position: absolute;
    top: 0.6rem;
    left: 0.07rem;
  }

  .content .psw1 b {
    width: 0.3rem;
    height: 0.38rem;
    background: url('../../assets/images/sprite.png') no-repeat -2.66rem -0.79rem;
    background-size: 10rem 6rem;
    position: absolute;
    top: 0.54rem;
    left: 0.1rem;
  }

  .content .psw2 b {
    width: 0.32rem;
    height: 0.36rem;
    background: url('../../assets/images/sprite.png') no-repeat -2.66rem -0.79rem;
    background-size: 10rem 6rem;
    position: absolute;
    top: 0.56rem;
    left: 0.08rem;
  }

  .content .code .send_code {
    position: absolute;
    top: 0.65rem;
    right: 0.2rem;
    font-size: 0.3rem;
    color: #5e88ff;
  }

  .content .code .unusable {
    color: #666;
  }

  .makesure {
    width: 6.88rem;
    height: 0.9rem;
    border-radius: 0.9rem;
    color: #fff;
    background-color: #5e88ff;
    text-align: center;
    line-height: 0.9rem;
    margin: 0.64rem auto;
    font-size: 0.36rem;
  }
</style>
